<script setup>
import {Delete, Edit, Plus,WarnTriangleFilled,CircleCheckFilled} from '@element-plus/icons-vue'
import {ref} from 'vue'
import {employeePageService,disableEnablingEmployeeService,updateEmoployeeService} from "@/api/employee";
import {departmentService} from "@/api/department";

import {ElMessage, ElMessageBox} from "element-plus";


//用户搜索时的部门名称
const userName = ref('')
const departmentName = ref('')
const gender = ref('')
//部门数据模型
const departmentData = ref([{
  departmentName: '',
  departmentDescription: ''
}])
//员工数据模型
const employeeData = ref([{
  id: '',
  userAccount: '',
  userName: '',
  avatarUrl: '',
  phone: '',
  gender: '',
  email: '',
  userStatus: '',
  role: '',
  departmentName: '',
}])
//控制抽屉是否显示
const dialogVisible = ref(false)
//控制编辑框标题，为添加部门or修改部门
const title = ref('')
//分页条数据模型
const page = ref(1)//当前页
const total = ref(20)//总条数
const pageSize = ref(10)//每页条数

 //当每页条数发生了变化，调用此函数
 const onSizeChange = (size) => {
  pageSize.value = size
  employeeList()
}
//当前页码发生变化，调用此函数
const onCurrentChange = (num) => {
  page.value = num
  employeeList()
}
//展示编辑弹窗
const showEditDialog = (row,Texttitle)=>{
  dialogVisible.value = true
  title.value = Texttitle
  employeeData.value.gender = row.gender
  employeeData.value.email = row.email
  employeeData.value.phone = row.phone
  employeeData.value.userName = row.userName
  employeeData.value.departmentName = row.departmentName
  employeeData.value.id = row.id
}
//获取分页部门列表
const employeeList = async () => {
  const params = {
    page: page.value,
    pageSize: pageSize.value,
    userName: userName.value? userName.value : null,
    departmentName: departmentName.value? departmentName.value : null,
    gender: gender.value? gender.value == "男"? 1:0 : null
  }
  const result = await employeePageService(params);
  //渲染视图
  total.value = result.data.total
  employeeData.value = result.data.records.map(employee => ({
    ...employee,
    role: employee.role === 0 ? '管理员' : '用户', // 角色描述
    userStatus: employee.userStatus === 0 ? '正常' : '禁用', // 状态描述
    gender: employee.gender === 0 ? '女' : '男'    // 性别描述
  }))
  console.log(employeeData.value);
}
employeeList()

//修改用户状态
const disableEnablingEmployee = (row,Texttitle) => {
  ElMessageBox.confirm(
      `你确认要` + Texttitle + `该用户吗？`,
      '温馨提示',
      {
        confirmButtonText: '确认',
        cancelButtonText: '取消',
        type: 'warning'
      }
  ).then(
    async (confirmed) => {
      const result = await disableEnablingEmployeeService(row.id)
      ElMessage({
      showClose: true,
      message: result.msg ? result.msg : Texttitle + `成功`,
      type: 'success',
    })
    employeeList()
  }
  )
}
//获取部门名称列表
const departmentList = async () => {
  const result = await departmentService();
  //渲染视图
  departmentData.value = result.data
  console.log(result);
}
//更新用户信息
  const updateEmoployee = async (row) => {

    const payload = {
    id: employeeData.value.id,
    userName: employeeData.value.userName,
    phone: employeeData.value.phone,
    gender: employeeData.value.gender=='女'? 0: 1,
    email: employeeData.value.email,
    departmentName: employeeData.value.departmentName
  };
  const result = await updateEmoployeeService(payload);
  ElMessage({
      showClose: true,
      message: result.msg ? result.msg : "更新成功",
      type: 'success',
    })
    employeeList()
  dialogVisible.value = false
}


</script>
<template>
  <el-card class="page-container">
    <template #header>
      <div class="header">
        <span>员工管理</span>

      </div>
    </template>
    <!-- 搜索表单 -->
    <el-form inline>
      <el-form-item label="员工姓名" style="width: 180px;">
        <el-input v-model.number="userName"></el-input>
      </el-form-item>
      <el-form-item label="员工性別" style="width: 180px;">
      <el-select v-model.number="gender" placeholder="选择性别" label="性別" style="width: 180px;">
        <el-option label="男" value="男" />
        <el-option label="女" value="女" />
      </el-select>
    </el-form-item>
      <el-form-item label="部门名称" style="width: 180px;">
        <el-input v-model.number="departmentName"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="employeeList">搜索</el-button>
        <el-button @click="userName='';gender='';departmentName=''">重置</el-button>
      </el-form-item>
    </el-form>
    <!-- 員工列表 -->
    <el-table :data="employeeData" style="width: 100%">
      <el-table-column label="员工账号"  prop="userAccount"></el-table-column>
      <el-table-column label="员工姓名" prop="userName"></el-table-column>
      <el-table-column label="员工头像" prop="avatarUrl">
      <template #default="{ row }">
        <el-image 
          style="width: 100px; height: 100px; border-radius: 4px"
          :preview-teleported="true"
          :src="row.avatarUrl"
          :preview-src-list="[row.avatarUrl]"
          :initial-index="4"
          fit="cover"
        >
          <template #error>
            <div class="image-error-placeholder">
              <el-icon><Picture /></el-icon>
            </div>
          </template>
        </el-image>
      </template>
    </el-table-column>
      <el-table-column label="性別" prop="gender" width="70"></el-table-column>
      <el-table-column label="手机号" prop="phone"></el-table-column>
      <el-table-column label="邮箱" prop="email" width="180"></el-table-column>
      <el-table-column label="部门" prop="departmentName"></el-table-column>
      <!-- <el-table-column label="状态" prop="userStatus"></el-table-column> -->
      <el-table-column label="状态" prop="userStatus">
        <template #default="{ row }">
          <span :style="{ color: row.userStatus === '禁用' ? 'red' : row.userStatus === '正常' ? 'green' : 'inherit' }">
            {{ row.userStatus }}
          </span>
        </template>
      </el-table-column>
      <!-- <el-table-column label="角色" prop="role" :style="{ color: role === '管理员' || role === '用户' ? 'green' : 'red'}"></el-table-column> -->
      <el-table-column label="角色" prop="role">
        <template #default="{ row }">
          <span :style="{ color: row.role === '管理员' ? 'red' : row.role === '用户' ? 'green' : 'inherit' }">
            {{ row.role }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="170">
        <template #default="{ row }">
          <el-button :icon="Edit" circle plain type="primary" @click="showEditDialog(row,'编辑员工');departmentList()"></el-button>

          <el-button :icon="WarnTriangleFilled" circle plain type="danger" @click="disableEnablingEmployee(row,'禁用')" v-if="row.userStatus === '正常'"></el-button>
          <el-button :icon="CircleCheckFilled" circle plain type="success" @click="disableEnablingEmployee(row,'启用')" v-if="row.userStatus === '禁用'"></el-button>
          
        </template>
      </el-table-column>
      <template #empty>
        <el-empty description="没有数据"/>
      </template>
    </el-table>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="page" v-model:page-size="pageSize" :page-sizes="[3, 5 ,10, 15]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total"
                   @size-change="onSizeChange"
                   @current-change="onCurrentChange" style="margin-top: 20px; justify-content: flex-end"/>
  </el-card>


  <!-- 抽屉 -->
  <el-drawer v-model="dialogVisible" :title="title" direction="rtl" size="50%">
    <!-- 添加員工表单 -->
    <el-form :model="employeeData" label-width="100px" :rules="rules">
      <el-form-item label="员工姓名" prop="userName">
        <el-input v-model="employeeData.userName" placeholder="请输入员工姓名"></el-input>
      </el-form-item>
      <el-form-item label="性別" prop="gender">
        <el-select v-model.number="employeeData.gender" placeholder="选择性别" label="性別" style="width: 180px;">
          <el-option label="男" value="男" />
          <el-option label="女" value="女" />
        </el-select>
      </el-form-item>
      <el-form-item label="手机号" prop="phone">
        <el-input v-model="employeeData.phone" placeholder="请输入手机号"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" prop="email">
        <el-input v-model="employeeData.email" placeholder="请输入邮箱"></el-input>
      </el-form-item>
        <el-form-item label="部门" prop="departmentName">
          <el-select v-model.number="employeeData.departmentName" placeholder="选择部门" style="width: 180px;">
           <el-option 
            v-for="item in departmentData"
            :key="item.departmentName"
            :label="item.departmentName"
            :value="item.departmentName"
            />
          </el-select>
        </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="updateEmoployee(row)">保存
        </el-button>
        <el-button type="info" @click="dialogVisible = false">取消
        </el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
</template>
<style lang="scss" scoped>
.page-container {
  min-height: 100%;
  box-sizing: border-box;

  .header {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
}

/* 抽屉样式 */
.avatar-uploader {
  :deep {
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }

    .el-upload {
      border: 1px dashed var(--el-border-color);
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
      transition: var(--el-transition-duration-fast);
    }

    .el-upload:hover {
      border-color: var(--el-color-primary);
    }

    .el-icon.avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      text-align: center;
    }
  }
}

.editor {
  width: 100%;

  :deep(.ql-editor) {
    min-height: 200px;
  }
}
</style>